<template>
  <div>
    <div id="tabs">
      <div class="spaceDiv"></div>
      <van-tabs v-model="activeName" color="#FBC805" background="#F3F6FF">
        <van-tab title="广场" name="a"></van-tab>
        <van-tab title="功能号" name="b"></van-tab>
      </van-tabs>
    </div>
    <div v-show="activeName == 'a'">
      <div class="hear">
        <div class="img">
          <img src="../../img/图层 52 拷贝.png" alt="" style="width: 100%" />
        </div>
        <p><strong>系统通知</strong></p>
        <p><b>恭喜您成功报名</b></p>
        <span>2022-01-13</span>
      </div>
      <div class="hear">
        <div class="img">
          <img src="../../img/图层 52 拷贝.png" alt="" style="width: 100%" />
        </div>
        <p><strong>系统通知</strong></p>
        <p><b>恭喜您成功报名</b></p>
        <span>2022-01-13</span>
      </div>
      <div class="hear">
        <div class="img">
          <img src="../../img/图层 52 拷贝.png" alt="" style="width: 100%" />
        </div>
        <p><strong>系统通知</strong></p>
        <p><b>恭喜您成功报名</b></p>
        <span>2022-01-13</span>
      </div>
      <div class="hear">
        <div class="img">
          <img src="../../img/图层 52 拷贝.png" alt="" style="width: 100%" />
        </div>
        <p><strong>系统通知</strong></p>
        <p><b>恭喜您成功报名</b></p>
        <span>2022-01-13</span>
      </div>
      <div class="hear">
        <div class="img">
          <img src="../../img/图层 52 拷贝.png" alt="" style="width: 100%" />
        </div>
        <p><strong>系统通知</strong></p>
        <p><b>恭喜您成功报名</b></p>
        <span>2022-01-13</span>
      </div>
    </div>
    <div v-show="activeName == 'b'">
      <div class="function" @click="npm">
        <div class="images"><img src="../../img/消息.png" alt="" /></div>
        <p class="functionName">客服姐姐</p>
      </div>
      <div class="function">
        <div class="images"><img src="../../img/任务的副本.png" alt="" /></div>
        <p class="functionName">兼职小助手</p>
      </div>
      <div class="function">
        <div class="images"><img src="../../img/智慧助手.png" alt="" /></div>
        <p class="functionName">系统消息</p>
      </div>
      <div class="function">
        <div class="images"><img src="../../img/客服.png" alt="" /></div>
        <p class="functionName">兼职对对碰</p>
      </div>
      <div class="function">
        <div class="images"><img src="../../img/组 5.png" alt="" /></div>
        <p class="functionName">任务小助手</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      activeName: "a",
    };
  },
  methods: {
    npm() {
      this.$router.push({
        name: "Nothices",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.function {
  width: 100%;
  height: 140px;
  border-bottom: #000000 0.5px ridge;
}
.function .images {
  float: left;
  width: 80px;
  height: 80px;
  margin-top: 30px;
  margin-left: 80px;
}
.function .functionName {
  margin: 0;
  padding-left: 198px;
  font-size: 34px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 140px;
}
#tabs {
  :deep(.van-tab) {
    font-size: 30px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 91px;
    flex: none;
    padding: 0 50px;
  }
  :deep(.van-tab--active) {
    font-size: 45px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 91px;
  }
  :deep(.van-tabs__line) {
    width: 86px;
    height: 16px;
    border-radius: 15px;
    background-color: rgb(251 200 5 / 66%);
  }
  :deep(.van-tabs--line .van-tabs__wrap) {
    height: 100px;
    margin-left: 0;
  }
  .spaceDiv {
    height: 50px;
    background: rgb(243, 246, 255);
  }
}
.hear {
  height: 145px;
  overflow: hidden;
}
.img {
  width: 145px;
  height: 145px;
  border-radius: 50%;
  float: left;
  margin-left: 10px;
}
p {
  margin-top: 26px;
}
p strong {
  font-size: 30px;
}
p b {
  font-size: 14px;
  color: #c1c1c1;
}
span {
  float: right;
  position: relative;
  top: -50px;
  left: -20px;
  color: #c1c1c1;
}
</style>
